<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{% block title %}Bootstrap, from Twitter{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/jquery.backgroundPosition.js"></script>
    <script src="/static/js/jquery-ui.js"></script>
    <!-- Le styles -->
    <link type="text/css" href="/static/css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />	
    <!--<link rel="stylesheet/less" href="/static/less/bootstrap.less">-->
    <!--<script src="/static/js/less.js"></script>-->
    <link href="/static/css/bootstrap.css" rel="stylesheet">
    <link href="/static/css/rfinder.css" rel="stylesheet">
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="/static/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
    <style>
      html, body {
        background-image: url('/static/img/buildings-bottom.png'),
                          url('/static/img/bg-{{time_of_day}}.jpg');
        }
    </style>
    <script>
      var tod = "{{time_of_day}}";
      
      function shootstar() {
        $('.shooting-star').css({backgroundPosition: '5000px 100px'});
        $('.shooting-star').animate({
          backgroundPosition:"(-5000px " + randomXToY(600, 1100) + "px)"
        }, 2400, 'linear');
        
        setTimeout("shootstar()", randomXToY(5000, 25000));
      }
      
      function whitebirdfly() {
        $('#whitebird').show();
        $('#whitebird').css("right", "0px");
        $('#whitebird').css("bottom", "0px");
        $('#whitebird').animate({
          opacity: 1,
          right: $(".moving-things").width() + 400,
          bottom: $(".moving-things").height() - 100,
        }, 8000, function() {
          setTimeout("whitebirdfly()", randomXToY(8000, 15000));
          $('#whitebird').hide();
        });
      }
      
      function blackbirdfly() {
        $('#blackbird').show();
        $('#blackbird').css("left", "-100px");
        $('#blackbird').css("top", "100px");
        $('#blackbird').animate({
          opacity: 1,
          left: $(".moving-things").width() + 400,
          top: $(".moving-things").height() - 100,
        }, 8000, function() {
          setTimeout("blackbirdfly()", randomXToY(8000, 15000));
          $('#blackbird').hide();
        });
      }
      
      function fogroll() {
        $('#fog').show();
        $('#fog').css("left", "-2000px");
        $('#fog').css("bottom", "0");
        $('#fog').animate({
          left: $(".moving-things").width() + 400,
        }, 60000, 'linear', function() {
          setTimeout("fogroll()", randomXToY(8000, 15000));
          $('#fog').hide();
        });
      }
      
      //function to get random number upto m
      function randomXToY(minVal, maxVal, floatVal)
      {
        var randVal = minVal+(Math.random()*(maxVal-minVal));
        return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
      }
      
      $(document).ready(function(){
        if (tod == "night") {
          $(".shooting-star").show();
          setTimeout("shootstar()", randomXToY(3000, 9000));
        } else if (tod == "day") {
          setTimeout("whitebirdfly()", randomXToY(3000, 9000));
        } else if (tod == "sunset") {
          setTimeout("blackbirdfly()", randomXToY(3000, 9000));
        } else if (tod == "morning") {
          setTimeout("fogroll()", randomXToY(3000, 9000));
        }
      });
      
    </script>
    {% block head %}{% endblock %}
  </head>

  <body><div class="body-container">
	<!---
    <div class="moving-things">
      <img id="whitebird" src="/static/img/white-bird.gif">
      <img id="blackbird" src="/static/img/black-bird.gif">
      <img id="fog" src="/static/img/fog.png">
    </div>
    <div class="shooting-star" style="display: none"></div>
	--->
    <div class="portal-header">
      <div class="center-div">
        <div class="header-left">
          <h1>{% block header-left %}WELCOME TO{% endblock %}</h1>
        </div>
        <div class="header-right">
          <h1>{% block header-right %}CAL PORTAL{% endblock %}</h1>
        </div>
        <div class="header-navi">
          <div class="header-navi-container">
            <ul>
              <li><a href="/about" id="navi-about">
                <div class="navi-logo"></div>
                <div class="navi-label">ABOUT</div>
              </a></li>
              <li><a href="/map" id="navi-map">
                <div class="navi-logo"></div>
                <div class="navi-label">MAP</div>
              </a></li>
              <li><a href="/buildings" id="navi-buildings">
                <div class="navi-logo"></div>
                <div class="navi-label">BUILDINGS</div>
              </a></li>
              <li><a href="/" id="navi-home">
                <div class="navi-logo"></div>
                <div class="navi-label">HOME</div>
              </a></li>
              <div style="clear: both"></div>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      {% block container %}

      <h1>Bootstrap starter template</h1>
      <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
      
      {% endblock %}
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/bootstrap-transition.js"></script>
    <script src="/static/js/bootstrap-alert.js"></script>
    <script src="/static/js/bootstrap-modal.js"></script>
    <script src="/static/js/bootstrap-dropdown.js"></script>
    <script src="/static/js/bootstrap-scrollspy.js"></script>
    <script src="/static/js/bootstrap-tab.js"></script>
    <script src="/static/js/bootstrap-tooltip.js"></script>
    <script src="/static/js/bootstrap-popover.js"></script>
    <script src="/static/js/bootstrap-button.js"></script>
    <script src="/static/js/bootstrap-collapse.js"></script>
    <script src="/static/js/bootstrap-carousel.js"></script>
    <script src="/static/js/bootstrap-typeahead.js"></script>
    <div style="display: none">
      <img src="/static/img/button-buildings-hover.png">
      <img src="/static/img/button-map-hover.png">
      <img src="/static/img/button-about-hover.png">
      <img src="/static/img/button-home-hover.png">
    </div>
  </div></body>
</html>
